<%@page import="user.BID"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
  
<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <link rel="stylesheet" href="css/bootstrap.min.css">
        <style>
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
        </style>
        <link rel="stylesheet" href="css/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="css/main.css">

        <!--[if lt IE 9]>
            <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
            <script>window.html5 || document.write('<script src="js/vendor/html5shiv.js"><\/script>')</script>
        <![endif]-->
    </head>
      <body id="b1">
      <%  ArrayList<BID> bids = (ArrayList<BID>)request.getAttribute("bids"); 
     String user= (String)request.getSession().getAttribute("user");
      	%>
      	
 	    <div class="container">
		<div class="row">
			<div class="span7 offset2 well">
					<span class="pull-left">Car Auction</span>
					<br>
					<% if(user!=null){ %>
					<h2><span class="pull-left"><c:out  value ="<%= user %>" /></span></h2>
					<form action ="Security?action=logout" method= "post">
					<button class="btn btn-small btn-primary pull-right" type="submit">Logout</button>
					</form>
					
					<% } %>
			
			</div>
			<div class="span3 offset2">
				<div class="thumbnail">
                  <img alt="300x200" style="width: 300px;" src="img/Audi-A1.jpg">
                  <div class="caption">
                    <h3>Audi - Circa 2015</h3>
                    <p>Audi's super-efficient car would use a small gasoline engine of 1.0 liters, almost certainly turbocharged, with a hybrid drive as well. The body would be a combination of lightweight steel, rather than aluminum, and carbon fiber. If it's based on the Audi A1, it could be as much as 157 inches long (4.0m). It would seat four and have creature comforts such as air-conditioning. Within Audi, it's simply called the "1.0-liter car."</p>
                  </div>
                </div>
			</div>
			<div class="span4 well">
			<div id="tableWrap" style="height:306px;overflow-y: scroll; margin-bottom:10px;">
				<table class="table table-striped" >
				  <thead>
					<tr>
					  <th>Username</th>
					  <th>Bid</th>
					</tr>
				  </thead>
				  <tbody>
				  <% for (int i = 0 ; i < bids.size() ; i++){ %>
				  
					<tr>
					  <td><c:out value="<%= bids.get(i).getName() %>"/></td>
					  <td><c:out  value ="<%=  bids.get(i).getBidValue()%>" /></td>
					</tr>
					
					<% } %>
				  </tbody>
				</table>
				</div>
			  	<form id="insertBid" class="form-signin">
					<input type="number" id="bidValue" name="bidValue" class="input-block-level" placeholder="Your Bid">
<!-- 					<input type="password" id="password" name="password" class="input-block-level" placeholder="Password"> -->
					<br>
					
					<button class="btn btn-medium btn-primary" type="submit">Add bid</button>
				</form>
			</div>
	    </div>
		</div> <!-- /container -->

		<script src="js/jquery-1.9.1.min.js"></script>
		<script src="js/jquery.validate.js"></script>
        <script src="js/vendor/bootstrap.min.js"></script>
        <script src="js/main.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				$("#insertBid").validate({
					rules:{
						bidValue:"required",
						},
				});
			});
		</script>
		<script>
$(document).ready(function(){
	 var formID;
	 
$("#insertBid").submit(function(event){
	if($("#insertBid").valid()){ 
	if (confirm('Are you sure you want to submit this BID  "'+ $('input[name="bidValue"]',this).val()+'"?')) {
		var $form = $(this),
      $inputs = $form.find("input, select, button, textarea"),
      serializedData = $form.serialize();  
     $inputs.attr("disabled", "disabled");
    
     $.ajax({
      url: "Security?action=insertBid",
      type: "post",
      data: serializedData,
      success: function(response, textStatus, jqXHR,formID){
    	//alert(response);
    	  $("#b1").html(response); 
      },
      error: function(jqXHR, textStatus, errorThrown){
      	console.log("The following error occured: "+textStatus, errorThrown);
      },
      complete: function(){
   	   $inputs.removeAttr("disabled");
    	 
      }
  });	
   
	 }
}
	 event.preventDefault(); 	  
});
});

</script>
    </body>
</html>
